<template>
  <a-card :bordered="false">
    <a-spin :spinning="confirmLoading">
      <ants-form-container :disabled="formDisabled">
        <a-form slot="detail" :form="form">
          <a-row>
            <a-col :span="24">
              <a-form-item label="列表每页条数" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input-number
                  v-decorator="['listPageSize',validatorRules.listPageSize]"
                  placeholder="请输入列表每页条数，最小1，最大20"
                  style="width: 300px"
                  :min="1"
                  :max="20"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item label="标签每页条数" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input-number
                  v-decorator="['lablePageSize',validatorRules.lablePageSize]"
                  placeholder="请输入标签每页条数，最小1，最大15"
                  style="width: 300px"
                  :min="1"
                  :max="15"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item label="分类每页条数" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input-number
                  v-decorator="['sortPageSize',validatorRules.sortPageSize]"
                  placeholder="请输入分类每页条数，最小1，最大10"
                  style="width: 300px"
                  :min="1"
                  :max="10"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item label="小程序标题" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-decorator="['appTitle', validatorRules.appTitle]" placeholder="请输入小程序标题"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item label="小程序描述" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-decorator="['appDesc', validatorRules.appDesc]" placeholder="请输入小程序描述"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-card size="small" title="首页" :bordered="false">
            <a-row>
              <a-col :span="24">
                <a-form-item label="LOGO" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <ants-image-upload biz-path="wxConfig" v-decorator="['appLogo', validatorRules.appLogo]"/>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="是否展示热门标签" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <ants-dict-select-tag
                    type="radioButton"
                    :trigger-change="true"
                    v-decorator="['isHotLable', validatorRules.isHotLable]"
                    placeholder="请选择是否展示热门标签"
                    dict-code="yn"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="是否展示热门分类" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <ants-dict-select-tag
                    type="radioButton"
                    :trigger-change="true"
                    v-decorator="['isHotSort', validatorRules.isHotSort]"
                    placeholder="请选择是否展示热门分类"
                    dict-code="yn"
                  />
                </a-form-item>
              </a-col>

            </a-row>
          </a-card>
          <a-card size="small" title="我的" :bordered="false">
            <a-row>
              <a-col :span="24">
                <a-form-item label="背景图" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <ants-image-upload biz-path="wxConfig" v-decorator="['myBackground', validatorRules.myBackground]"/>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="版权LOGO" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <ants-image-upload biz-path="wxConfig" v-decorator="['copyrightLogo', validatorRules.copyrightLogo]"/>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="版权描述" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-input v-decorator="['copyrightText', validatorRules.copyrightText]" placeholder="请输入版权描述"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
          <a-card size="small" title="登陆" :bordered="false">
            <a-row>
              <a-col :span="24">
                <a-form-item label="背景图" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <ants-image-upload biz-path="wxConfig"
                                     v-decorator="['loginBackground', validatorRules.loginBackground]"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-form>
      </ants-form-container>
      <a-col :span="24" style="text-align: center;margin-bottom: 20px">
        <a-button key="back" @click="handleEdit" v-if="this.formDisabled">
          编 辑
        </a-button>
        <a-button style="margin-left: 20px" key="submit" type="primary" @click="handleSave" v-else>
          保 存
        </a-button>
      </a-col>
    </a-spin>
  </a-card>
</template>

<script>
import AntsFormContainer from '@/components/ants/AntsFormContainer'
import pick from 'lodash.pick'
import {getAction, httpAction} from '@/api/manage'
import AntsImageUpload from '@/components/ants/AntsImageUpload'
import AntsDictSelectTag from '@/components/dict/AntsDictSelectTag'

export default {
  name: 'FriendLinks',
  components: {
    AntsFormContainer,
    AntsImageUpload,
    AntsDictSelectTag
  },
  data() {
    return {
      form: this.$form.createForm(this),
      model: {},
      labelCol12: {
        xs: {span: 24},
        sm: {span: 8}
      },
      wrapperCol12: {
        xs: {span: 24},
        sm: {span: 14}
      },
      labelCol: {
        xs: {span: 24},
        sm: {span: 4}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      validatorRules: {
        listPageSize: {
          rules: [
            {required: true, message: '请输入列表每页条数，最小1，最大20!'}
          ]
        },
        lablePageSize: {
          rules: [
            {required: true, message: '请输入标签每页条数，最小1，最大15!'}
          ]
        },
        sortPageSize: {
          rules: [
            {required: true, message: '请输入分类每页条数，最小1，最大10!'}
          ]
        },
        appTitle: {
          rules: [
            {required: true, message: '请输入小程序标题!'}
          ]
        },
        appDesc: {
          rules: [
            {required: true, message: '请输入小程序描述!'}
          ]
        },
        appLogo: {
          rules: [
            {required: true, message: '请上传LOGO!'}
          ]
        },
        isHotLable: {
          rules: [
            {required: true, message: '请选择是否展示热门标签!'}
          ]
        },
        isHotSort: {
          rules: [
            {required: true, message: '请选择是否展示热门分类!'}
          ]
        },
        myBackground: {
          rules: [
            {required: true, message: '请上传背景图!'}
          ]
        },
        copyrightLogo: {
          rules: [
            {required: true, message: '请上传版权LOGO!'}
          ]
        },
        copyrightText: {
          rules: [
            {required: true, message: '请输入版权描述!'}
          ]
        },
        loginBackground: {
          rules: [
            {required: true, message: '请上传背景图!'}
          ]
        },
      },
      url: {
        list: '/wxConfig/list',
        add: '/wxConfig/add',
        edit: '/wxConfig/edit'
      },
      confirmLoading: false,
      formDisabled: true
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      getAction(this.url.list, {}).then(res => {
        if (res.success) {
          this.form.resetFields()
          this.model = Object.assign({}, res.result)
          this.visible = true
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.model, 'listPageSize', 'lablePageSize', 'sortPageSize', 'appTitle', 'appDesc', 'appLogo', 'isHotLable', 'isHotSort', 'myBackground', 'copyrightLogo', 'copyrightText', 'loginBackground'))
          })
        }

      })
    },
    handleEdit() {
      this.formDisabled = false
      this.$message.success('可以开始操作了！')
    },
    handleSave() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          const formData = Object.assign(this.model, values)
          var url = ''
          var method = ''
          if (!this.model.id) {
            url = that.url.add
            method = 'post'
          } else {
            url = that.url.edit
            method = 'put'
          }
          httpAction(url, method, formData).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              this.formDisabled = true
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    }
  }
}
</script>
